<template>
  <div class="app-container">
    <div>
      <el-form ref="form"
               :model="form"
               label-width="80px"
               inline>
        <el-form-item label="账期">
          <el-date-picker value-format="yyyyMM"
                          v-model="form.acctMonth"
                          style="width: 140px"
                          type="month"
                          placeholder="请选择账期"
                          :picker-options="endDateDisabled"></el-date-picker>
        </el-form-item>
        <el-form-item label="区域">
          <el-cascader clearable
                       v-model="form.areaId"
                       :options="options"
                       ref="cascader"
                       :props="props"
                       :show-all-levels="false"
                       @visible-change="getAreaData"></el-cascader>
        </el-form-item>
        <el-form-item label="分产品" v-if="activeName == '7'">
            <el-select v-model="form.indexId" placeholder="请选择" clearable>
                <el-option
                    v-for="(dict,index) in indexList"
                    :key="index"
                    :label="dict.verticalIndexName"
                    :value="dict.verticalIndexId"
                />
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery"
                     style="margin-left: 10px">查询</el-button>
          <el-button type="primary"
                     plain
                     @click="exportExcel">导出Excel</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName"
             @tab-click="initTable()">
      <el-tab-pane label="收入环比波动概况"
                   name="1">
        <HbWaveTable :form="searchData"
                     ref="HbWaveTable"></HbWaveTable>
      </el-tab-pane>
      <el-tab-pane label="码号收入环比分析"
                   name="2">
        <HbAnalysisTable :form="searchData"
                         ref="HbAnalysisTable"></HbAnalysisTable>
      </el-tab-pane>
      <el-tab-pane label="码号收入趋势细项"
                   name="3">
        <MhDetailTable :form="searchData"
                       ref="MhDetailTable"></MhDetailTable>
      </el-tab-pane>
      <el-tab-pane label="码号收入环比分析（细项）"
                   name="4">
        <MhHbDetailTable :form="searchData"
                         ref="MhHbDetailTable"></MhHbDetailTable>
      </el-tab-pane>
      <el-tab-pane label="台阶收入趋势"
                   name="5">
        <StepDetailTable :form="searchData"
                         ref="StepDetailTable"></StepDetailTable>
      </el-tab-pane>
      <el-tab-pane label="台阶收入环比（细项）"
                   name="6">
        <HbStepDetailTable :form="searchData"
                           ref="HbStepDetailTable"></HbStepDetailTable>
      </el-tab-pane>
      <el-tab-pane label="收入环比分析（分产品）"
                   name="7">
        <HbIncomeProduct :form="searchData"  ref="HbIncomeProduct"></HbIncomeProduct>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { downLoadExcelBody } from "@/utils/zipdownload";
import { mapGetters } from "vuex";
import { roleDeptTreeselecttw } from "@/api/workspace/income";
import { getMaxMonth,getProduct } from "@/api/barCode/index";

import HbWaveTable from "./components/HbWaveTable.vue";
import HbAnalysisTable from "./components/HbAnalysisTable.vue";
import MhDetailTable from "./components/MhDetailTable.vue";
import MhHbDetailTable from "./components/MhHbDetailTable.vue";
import StepDetailTable from "./components/StepDetailTable.vue";
import HbStepDetailTable from "./components/HbStepDetailTable.vue";
import HbIncomeProduct from './components/HbIncomeProduct.vue'

export default {
  name: "barCode",
  components: {
    HbWaveTable,
    HbAnalysisTable,
    MhDetailTable,
    MhHbDetailTable,
    StepDetailTable,
    HbStepDetailTable,
    HbIncomeProduct
  },
  data () {
    return {
      form: {
        acctMonth: "",
        areaId: "",
        indexId: '',
      },
      searchData: {
        acctMonth: "",
        areaId: "",
        indexId: ''
      },
      endDateDisabled: this.pickerDisabled(),
      disabledTime: "",
      options: [],
      props: {
        value: "deptId",
        label: "displayName",
        emitPath: false,
        checkStrictly: true,
        lazy: true,
        lazyLoad (node, resolve) {
          if (node.value) {
            roleDeptTreeselecttw({
              areaId: node.value
            }).then(res => {
              if (res.code == 200) {
                if (node.level == 3) {
                  res.depts.forEach(item => {
                    item.leaf = true;
                  });
                }
                resolve(res.depts);
              }
            });
          }
        }
      },
      activeName: "1",
      indexList: []
    };
  },
  computed: {
    ...mapGetters(["deptId", "deptName"])
  },
  created () { },
  mounted () {
    this.getProduct()
    this.getMaxMonths();
  },
  methods: {
    getProduct() {
      getProduct().then(res => {
          if (res.code == 200) {
              this.indexList = res.data
          }
      })
    },
    getAreaData (val) {
      if (val == true) {
        let obj = { deptId: this.deptId, displayName: this.deptName };
        let arr = [];
        arr.push(obj);
        this.options = arr;
      }
    },
    pickerDisabled () {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear(),
              a = t.getMonth() + 1;
            if (
              (a >= 1 && a <= 9 && (a = "0" + a),
                n.toString() + a.toString() > e.disabledTime)
            ) {
              return !0;
            }
          }
        }
      };
    },
    getMaxMonths () {
      return new Promise(resolve => {
        getMaxMonth().then(res => {
          resolve(res.msg);
          this.form.acctMonth = res.msg;
          this.disabledTime = res.msg;
          var obj = {
            deptId: Number(this.deptId),
            displayName: this.deptName
          };
          let arr = [];
          arr.push(obj);
          this.options = arr;
          this.form.areaId = Number(this.deptId);
          this.handleQuery();
        });
      });
    },
    exportExcel () {

      let nodesInfo = this.$refs['cascader'].getCheckedNodes()
      let obj = Object.assign({}, this.form);
      let fileName = obj.acctMonth + '_' + nodesInfo[0].label + '_' + "收入会审";
      downLoadExcelBody("/examine/export", obj, fileName);

    },
    exportPpt () { },
    handleQuery () {
      this.searchData.areaId = this.form.areaId;
      this.searchData.acctMonth = this.form.acctMonth;
      this.searchData.indexId = this.form.indexId
      this.initTable();
    },
    initTable () {
      const { activeName } = this;
      if (activeName == 1) {
        this.$refs.HbWaveTable.getList();
      } else if (activeName == 2) {
        this.$refs.HbAnalysisTable.getList();
      } else if (activeName == 3) {
        this.$refs.MhDetailTable.getList();
      } else if (activeName == 4) {
        this.$refs.MhHbDetailTable.getList();
      } else if (activeName == 5) {
        this.$refs.StepDetailTable.getList();
      } else if (activeName == 6) {
        this.$refs.HbStepDetailTable.getList();
      } else if (activeName == 7) {
        this.$refs.HbIncomeProduct.getList();
      }
    }
  }
};
</script>
